<!-- 
  @name: 首页
  @date: 2020.3.3
 -->
<template>
	<view class="content">
		<!-- 以下是弹窗的统计区域 -->
		<view class="fixed-bar"></view>
		<view class="fixed_top z200" :style="{ height: showTotal ? showHeight : '0' }">
			<view class="bg-top"></view>
			<!-- 数据统计 -->
			<view class="num-total">
				<view class="top-bar">
					<!-- <view class="area"> 
						<ym-region label="当前区域：" @change="areaChange"></ym-region>
					</view> -->
					<view></view>
					<view class="icon" @tap="openCloseDate"></view>
				</view>

				<view class="total">
					<view class="item">
						<view class="top t1">{{ orderNum2 }}</view>
						<view class="btm">加注总单</view>
					</view>
					<view class="item">
						<view class="top t2">{{ totalFillMoney2 }}</view>
						<view class="btm">加注总额</view>
					</view>
					<view class="item">
						<view class="top t3">{{ totalFillNum2 }}</view>
						<view class="btm">加注总量(kg)</view>
					</view>
				</view>
				<view class="tip stat-date">统计日期：{{ startDate }}~{{ endDate }}</view>
			</view>
			<!-- 百分比统计 -->
			<view class="chart-total">
				<view class="title">
					<view class="i"></view>
					<text class="t">用户支付方式数据统计</text>
				</view>
				<view class="total">
					<view style="width: 300upx;height: 300upx;margin-top: 20rpx;" v-show="showTotal && !showPopup">
						<canvas canvas-id="canvasRing2" id="canvasRing2" style="width: 100%;height: 100%;"></canvas>
					</view>
					<view class="num">
						<view class="item t1">
							<view class="led" style="background-color: #5498FF;"></view>
							<view class="tip">微信支付</view>
							<view class="cot">{{ recordRadio2 }}</view>
						</view>
						<view class="item">
							<view class="led" style="background-color: #38E65D;"></view>
							<view class="tip">余额支付</view>
							<view class="cot">{{ balanceRadio2 }}</view>
						</view>
						<view class="item">
							<view class="led" style="background-color: #FF4F3C;"></view>
							<view class="tip">免单支付</view>
							<view class="cot">{{ freeRadio2 }}</view>
						</view>
						<view class="item">
							<view class="led" style="background-color: #03D6EF;"></view>
							<view class="tip">加注卡支付</view>
							<view class="cot">{{ cardRadio2 }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 以下是正常状态下的统计 -->
		<view class="bg-top"></view>
		<!-- 数据统计 -->
		<view class="num-total">
			<view v-if="isShowStickBar" style="height: 60rpx;"></view>
			<view :class="[isShowStickBar ? 'stick-bar' : 'top-bar']">
				<view class="area"><ym-region ref="ymRegion" label="当前区域：" :areafilter="areafilter" @change="areaChange" :defaultValue="['全国', '全国']"></ym-region></view>
				<view v-show="!isShowStickBar" class="icon" @tap="openCloseDate"></view>
				<view v-show="isShowStickBar" @tap="openCloseDate">
					<view class="tat-date">
						<view>{{ startDate }}</view>
						<view>{{ endDate }}</view>
					</view>
				</view>
			</view>
			<view class="total">
				<view class="item">
					<view class="top t1">{{ orderNum }}</view>
					<view class="btm">加注总单</view>
				</view>
				<view class="item">
					<view class="top t2">{{ totalFillMoney }}</view>
					<view class="btm">加注总额</view>
				</view>
				<view class="item">
					<view class="top t3">{{ totalFillNum }}</view>
					<view class="btm">加注总量(kg)</view>
				</view>
			</view>
			<view class="tip stat-date">
				统计日期：{{ startDate }}
				<text style="margin: 0 4rpx;">~</text>
				{{ endDate }}
			</view>
		</view>

		<!-- 百分比统计 -->
		<view class="chart-total">
			<view class="title">
				<view class="i"></view>
				<text class="t">用户支付方式数据统计</text>
			</view>
			<view class="total">
				<view style="width: 300upx;height: 300upx;margin-top: 20rpx;" v-show="!showTotal && !showPopup">
					<canvas canvas-id="canvasRing" id="canvasRing" style="width: 100%;height: 100%;"></canvas>
				</view>
				<view class="num">
					<view class="item t1">
						<view class="led" style="background-color: #5498FF;"></view>
						<view class="tip">微信支付</view>
						<view class="cot">{{ recordRadio }}</view>
					</view>
					<view class="item">
						<view class="led" style="background-color: #38E65D;"></view>
						<view class="tip">余额支付</view>
						<view class="cot">{{ balanceRadio }}</view>
					</view>
					<view class="item">
						<view class="led" style="background-color: #FF4F3C;"></view>
						<view class="tip">免单支付</view>
						<view class="cot">{{ freeRadio }}</view>
					</view>
					<view class="item">
						<view class="led" style="background-color: #03D6EF;"></view>
						<view class="tip">加注卡支付</view>
						<view class="cot">{{ cardRadio }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 日期筛选弹窗 -->
		<date-select top="100" :show="showPopup" :start="startTime" :end="endTime" @submit="onSubmit" @cancle="onCancle"></date-select>

		<!-- 列表 -->
		<view class="list-total">
			<view class="title">
				<view class="i"></view>
				<text class="t">加注站实时销售统计</text>
			</view>
			<view class="item" v-for="(item, index) in lists" :key="index">
				<view class="top" @tap="watchDet(item, index, 1)">
					<image class="img" :src="item.siteLogo ? item.siteLogo : imgUser"></image>
					<view class="name text_over">{{ item.siteName }}</view>
					<view>共{{ item.fillOrderNum }}单</view>
				</view>
				<view class="middle" v-for="(it, ix) in item.lstMachines" :key="it.machineId" @tap="watchDet(it, ix, 2)">
					<view class="line">
						<text class="tip t1 text_over">{{ it.macName }}</text>
						<text class="num">{{ it.recordNum }}单</text>
					</view>
					<view class="line">
						<text class="tip">销售金额</text>
						<text class="num">{{ it.saleMoney }}元</text>
					</view>
					<view class="line">
						<text class="tip">销售总量</text>
						<text class="num">{{ it.saleNum }}kg</text>
					</view>
				</view>
				<view class="bottom" v-if="item.showmore > 0">
					<view class="more" v-if="item.showmore === 1" @tap="showMore(item, index, 1)">
						<text>展开更多</text>
						<view class="arr down"></view>
					</view>
					<view class="more" v-if="item.showmore === 2" @tap="showMore(item, index, 2)">
						<text>收起更多</text>
						<view class="arr up"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部加载提示 -->
		<btm-load></btm-load>

		<!-- 显示于tabbar之上，渲染阴影效果 -->
		<view class="tabbar_shadow"></view>
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js';
import ymRegion from '@/components/ym-region/ym-region.vue';
var $canvasRing = null;
var $canvasRing2 = null;

export default {
	components: { ymRegion },
	data() {
		return {
			imgUser: this.$tmp.IMG_USER, //默认头像
			showPopup: false, //是否显示日期筛选图层
			startDate: '', //开始日期-显示
			endDate: '', //结束日期-显示
			startTime: '', //开始日期-提交
			endTime: '', //结束日期-提交
			lists: [], //列表
			page: 1, //页码
			earnRadio: 0, //总的预计收益比例
			earnRadioNum: '-', //总的预计收益具体值
			orderNum: '-', //总的加注总单数
			totalFillMoney: '-', //总的加注总金额
			totalFillNum: '-', //总的加注总量
			freeRadio: '-', //总的免单支付比例
			cardRadio: '-', //总的加注卡支付比例
			balanceRadio: '-', //总的余额支付比例
			recordRadio: '-', //总的微信支付比例
			showTotal: false, //是否显示单个统计区域
			showHeight: '0', //单个统计区高度
			earnRadio2: 0, //单个预计收益比例
			earnRadioNum2: '-', //单个预计收益具体值
			orderNum2: '-', //单个加注总单数
			totalFillMoney2: '-', //单个加注总金额
			totalFillNum2: '-', //单个加注总量
			freeRadio2: '-', //单个免单支付比例
			cardRadio2: '-', //单个加注卡支付比例
			balanceRadio2: '-', //单个余额支付比例
			recordRadio2: '-', //单个微信支付比例
			scrollTop: 0, //上一次滚动的位置(长度)
			userMsg: '', //存储在本地的用户信息
			isShowStickBar: false,
			areaId: '', // 区域筛选id
			areafilter: {
				province: [],
				city: []
			} // 区域过滤对象
		};
	},
	computed: {
		//是否前往登录页
		goLogin() {
			return this.$store.state.goLogin;
		}
	},
	onLoad() {
		this.uChartsDef(); //必须放在此处，防止重新登录后无法刷新
		this.startTime = this.$getStartDay();
		this.endTime = this.$getToday();
		this.dealDate();
		this.userMsg = uni.getStorageSync(this.$tmp.USER_INFO);
		if (this.userMsg) {
			this.reToken();
		} else {
			uni.showModal({
				content: '本软件仅用于跟本公司签约的运营商及下属账号使用，请使用本公司分配的账号登录。',
				confirmText: '去登录',
				cancelText: '再看看',
				success: rs => {
					if (rs.confirm) {
						this.$store.commit('goLogin', true);
						this.$navigateTo('/pages/login/index');
					}
				}
			});
		}
	},
	onShow() {
		if (this.$store.state.reLogin) {
			this.$store.commit('hasLogin');
			if (this.goLogin) {
				this.pullDown();
				this.$store.commit('goLogin', false);
			}
		}
	},
	onPageScroll(e) {
		if (e.scrollTop - this.scrollTop > 50 || e.scrollTop - this.scrollTop < -50) {
			this.showTotal = false;
			this.scrollTop = e.scrollTop;
		}
		this.isShowStickBar = e.scrollTop > 100;
	},
	onReachBottom() {
		this.$store.commit('btmLoad', true);
		this.getList();
	},
	onPullDownRefresh() {
		this.$refs.ymRegion.setDefaultValue();
		this.areaId = '';
		this.pullDown();
	},
	methods: {
		// 区域选择器
		areaChange(e) {
			console.log(e);
			this.areaId = e[1].id != 0 ? e[1].id : '';
			this.lists = [];
			this.page = 1;
			this.getList();
		},
		//刷新token
		reToken() {
			uni.login({
				provider: 'weixin',
				success: rs => {
					this.$http({
						url: this.$api.userUrl + 'wxloginbytype',
						data: {
							action: 1,
							code: rs.code
						}
					}).then(res => {
						let info = JSON.parse(this.userMsg);
						info.token = res;
						info.isLogin = true;
						this.$store.commit('login', info);
						this.$store.commit('hasLogin');
						this.pullDown();
					});
				}
			});
		},
		//下拉刷新
		pullDown() {
			this.startTime = this.$getStartDay();
			this.endTime = this.$getToday();
			this.dealDate();
			this.hasSelect();
		},
		//筛选后
		hasSelect() {
			this.page = 1;
			this.lists = [];
			this.showTotal = false;
			this.getList();
		},
		//点击展开/收起更多
		showMore(item, index, code) {
			let data = item;
			if (code === 1) {
				//展开更多
				data.showmore = 2;
				data.lstMachines = JSON.parse(JSON.stringify(data.lstMachines2));
			} else {
				//收起更多
				data.showmore = 1;
				data.lstMachines.splice(3);
			}
			this.lists[index] = data;
		},
		//处理总数据
		dealData(res) {
			if (res.earnRadio && res.earnRadio > 0) {
				this.earnRadio = parseFloat(res.earnRadio);
				this.earnRadioNum = this.$operation(res.earnRadio, '*', res.totalFillMoney);
			}
			this.totalFillMoney = res.totalFillMoney;
			this.totalFillNum = res.totalFillNum;
			this.orderNum = res.orderNum;
			this.recordRadio = this.$toPercent(res.recordRadio);
			this.balanceRadio = this.$toPercent(res.balanceRadio);
			this.freeRadio = this.$toPercent(res.freeRadio);
			this.cardRadio = this.$toPercent(res.cardRadio);
			let data = {
				series: [
					{ name: '微信支付', data: res.recordRadio ? parseFloat(res.recordRadio) : 0 },
					{ name: '余额支付', data: res.balanceRadio ? parseFloat(res.balanceRadio) : 0 },
					{ name: '免单支付', data: res.freeRadio ? parseFloat(res.freeRadio) : 0 },
					{ name: '加注卡支付', data: res.cardRadio ? parseFloat(res.cardRadio) : 0 }
				]
			};
			if (!res.recordRadio && !res.balanceRadio && !res.freeRadio && !res.cardRadio) {
				data.series.push({ name: '未统计', data: 1 });
			}
			$canvasRing.updateData(data);
		},
		//处理单个数据
		dealData2(res) {
			if (res.earnRadio && res.earnRadio > 0) {
				this.earnRadio2 = parseFloat(res.earnRadio);
				this.earnRadioNum2 = this.$operation(res.earnRadio, '*', res.totalFillMoney);
			}
			this.totalFillMoney2 = res.totalFillMoney;
			this.totalFillNum2 = res.totalFillNum;
			this.orderNum2 = res.orderNum;
			this.recordRadio2 = this.$toPercent(res.recordRadio);
			this.balanceRadio2 = this.$toPercent(res.balanceRadio);
			this.freeRadio2 = this.$toPercent(res.freeRadio);
			this.cardRadio2 = this.$toPercent(res.cardRadio);
			let data = {
				series: [
					{ name: '微信支付', data: res.recordRadio ? parseFloat(res.recordRadio) : 0 },
					{ name: '余额支付', data: res.balanceRadio ? parseFloat(res.balanceRadio) : 0 },
					{ name: '免单支付', data: res.freeRadio ? parseFloat(res.freeRadio) : 0 },
					{ name: '加注卡支付', data: res.cardRadio ? parseFloat(res.cardRadio) : 0 }
				]
			};
			if (!res.recordRadio && !res.balanceRadio && !res.freeRadio && !res.cardRadio) {
				data.series.push({ name: '未统计', data: 1 });
			}
			$canvasRing2.updateData(data);
			this.showHeight = this.earnRadio2 > 0 ? '910rpx' : '780rpx';
			this.showTotal = true;
		},
		//点击某一项，查看详细信息，code：1-加注站，2-加注机
		watchDet(item, index, code) {
			let api = '';
			let data = {};
			if (code === 1) {
				api = 'getfillsitedetail';
				data.siteId = item.siteId;
			} else {
				api = 'getfillmachinedetail';
				data.macCode = item.macCode;
			}
			data.startTime = this.startTime;
			data.endTime = this.endTime;
			this.$http({
				url: this.$api.siteUrl + api,
				data: data
			}).then(res => {
				this.dealData2(res);
			});
		},
		//获取列表
		getList() {
			this.getsitearealist();
			this.$http({
				url: this.$api.accountUrl + 'getfilloperatorindex',
				data: {
					startTime: this.startTime,
					endTime: this.endTime,
					page: this.page,
					rows: this.$tmp.ROWS_RET,
					areaId: this.areaId
				},
				loading: this.page > 1 ? 0 : ''
			}).then(res => {
				if (this.page === 1) {
					this.dealData(res);
				}
				let arr = res.lstSites;
				if (arr && arr.length > 0) {
					arr.forEach(item => {
						if (item.lstMachines && item.lstMachines.length > 3) {
							item.lstMachines2 = JSON.parse(JSON.stringify(item.lstMachines));
							item.lstMachines.splice(3);
							item.showmore = 1;
						} else {
							item.showmore = 0;
						}
					});
					this.lists = this.lists.concat(arr);
					this.page += 1;
				}
			});
		},
		// 获取所有站点区域id
		getsitearealist() {
			let operaId = JSON.parse(this.$store.state.userinfo || '{}').operaId;
			if (!operaId) return;
			this.$http({
				url: this.$api.siteUrl + 'getsitearealist',
				data: {
					operaId: operaId
				}
			}).then(res => {
				for (var i = 0; i < res.length; i++) {
					var province = res[i].areaId.substr(0, 2) + '0000';
					var city = res[i].areaId.substr(0, 4) + '00';
					this.areafilter.province.push(province);
					this.areafilter.city.push(city);
				}
				// 去重
				this.areafilter.province = Array.from(new Set([...this.areafilter.province]));
				this.areafilter.city = Array.from(new Set([...this.areafilter.city]));
			});
		},
		//打开/关闭日期筛选弹窗
		openCloseDate() {
			this.showPopup = !this.showPopup;
		},
		//确认日期筛选
		onSubmit(start, end) {
			this.showPopup = false;
			this.startTime = start;
			this.endTime = end;
			this.dealDate();
			this.hasSelect();
		},
		//取消日期筛选
		onCancle(bool) {
			this.showPopup = bool;
		},
		//处理日期显示格式
		dealDate() {
			this.startDate = this.startTime.replace(/\-/, '年');
			this.startDate = this.startDate.replace(/\-/, '月');
			this.startDate = this.startDate + '日';
			this.endDate = this.endTime.replace(/\-/, '年');
			this.endDate = this.endDate.replace(/\-/, '月');
			this.endDate = this.endDate + '日';
		},
		//初始化uCharts
		uChartsDef() {
			let width = uni.upx2px(326);
			let height = uni.upx2px(326);
			let ringWidth = uni.upx2px(50);
			$canvasRing = new uCharts({
				$this: this,
				canvasId: 'canvasRing',
				series: [], //数据源
				width: width, //宽度，单位px
				height: height, //高度，单位px
				type: 'ring', //图表类型
				animation: true, //是否动画展示，默认true
				dataLabel: false, //是否在图表中显示数据标签内容值，默认true
				colors: ['#5498FF', '#38E65D', '#FF4F3C', '#03D6EF', '#DDDDDD'],
				legend: {
					show: false //是否显示图例标识
				},
				extra: {
					pie: {
						ringWidth: ringWidth, //圆环宽度，单位为px
						disablePieStroke: true, //不绘制饼图（圆环图）各区块的白色分割线，默认为 false
						labelWidth: 15 //数据标签到饼图外圆连线的长度，单位为px
					}
				}
			});
			$canvasRing2 = new uCharts({
				$this: this,
				canvasId: 'canvasRing2',
				series: [], //数据源
				width: width, //宽度，单位px
				height: height, //高度，单位px
				type: 'ring', //图表类型
				animation: true, //是否动画展示，默认true
				dataLabel: false, //是否在图表中显示数据标签内容值，默认true
				colors: ['#5498FF', '#38E65D', '#FF4F3C', '#03D6EF', '#DDDDDD'],
				legend: {
					show: false //是否显示图例标识
				},
				extra: {
					pie: {
						ringWidth: ringWidth, //圆环宽度，单位为px
						disablePieStroke: true, //不绘制饼图（圆环图）各区块的白色分割线，默认为 false
						labelWidth: 15 //数据标签到饼图外圆连线的长度，单位为px
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
$font-size-sm: 24rpx;
$page-background: #f9fbff;
page {
	background-color: $page-background;
}
.fixed-bar {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 10rpx;
}
.content {
	align-items: center;
	overflow: hidden;
}

.fixed_top {
	overflow: hidden;
	transition: height 0.2s;
	background-color: $page-background;
	.num-total,
	.chart-total {
		margin-left: 20rpx;
	}
	&.z200 {
		z-index: 200;
	}
}
.bg-top {
	width: 750rpx;
	height: 270rpx;
	background-color: $color-primary;
}
.num-total,
.chart-total {
	width: 710rpx;
	background-color: $color-white;
	border-radius: $border-radius-sm;
	box-shadow: 0px 0px 13px 2px rgba(33, 74, 164, 0.1);
}

/* 数据统计 */
.num-total {
	margin-top: -250rpx;
	padding: 28rpx 0;

	.top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		.area {
			font-weight: 600;
			color: #999999;
			display: flex;
			align-items: center;
		}
	}
	.icon {
		width: 38rpx;
		height: 38rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15gs4yAFUuMAAACAR1h-wQ405.png');
	}
	.mount {
		width: 100%;
		margin-bottom: 26rpx;
		color: $color-primary;
		display: flex;
		flex-direction: column;
		align-items: center;
		.num {
			font-size: 60rpx;
			font-family: $font-family-num;
		}
		.note {
			font-size: 22rpx;
			margin-top: 16rpx;
		}
	}
	.total {
		width: 100%;
		display: flex;
		margin-top: 30rpx;
		flex-direction: row;
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.top {
				font-size: 42rpx;
				font-family: $font-family-num;
			}
			.top.t1 {
				color: #28ba47;
			}
			.top.t2 {
				color: #ffba00;
			}
			.top.t3 {
				color: #03d6ef;
			}
			.btm {
				margin-top: 10rpx;
				font-size: 22rpx;
			}
		}
	}
	.tip {
		font-size: 22rpx;
		color: $color-grey;
		margin-top: 40rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}
}

/* 百分比统计 */
.chart-total {
	margin-top: $spacing-col;
	padding: 40rpx 0;
	.title {
		width: 100%;
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.i {
			width: 30rpx;
			height: 26rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15gxH6AcPjuAAABywUWPkQ118.png');
		}
		.t {
			font-size: $font-size-sm;
			margin-left: 16rpx;
		}
	}
	.total {
		display: flex;
		flex-direction: row;
		.num {
			flex: 1;
			margin-top: 54rpx;
			margin-left: 100rpx;
			margin-right: 34rpx;
			.item.t1 {
				margin-top: 0;
			}
			.item {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 36rpx;
				.led {
					width: 24rpx;
					height: 24rpx;
				}
				.tip {
					flex: 1;
					margin-left: 21rpx;
					font-size: 20rpx;
					color: $color-grey;
				}
				.cot {
					font-size: $font-size-sm;
				}
			}
		}
	}
}

/* 列表 */
.list-total {
	width: 730rpx;
	margin-top: $spacing-col;
	margin-bottom: 10rpx;
	padding-bottom: 40rpx;
	background-color: $color-white;
	border-radius: $border-radius-sm;
	box-shadow: 0px 0px 13px 2px rgba(75, 123, 226, 0.2);
	.title {
		width: 100%;
		margin-top: 40rpx;
		margin-left: 30rpx;
		margin-bottom: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.i {
			width: 30rpx;
			height: 24rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15hupWAUkicAAAAvz9s2jc359.png');
		}
		.t {
			font-size: $font-size-sm;
			margin-left: 20rpx;
		}
	}
	.item {
		width: 100%;
		padding: 0 30rpx;
		padding-top: 26rpx;
		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			.img {
				width: 70rpx;
				height: 70rpx;
				border-radius: $border-radius-circle;
			}
			.name {
				flex: 1;
				font-size: 30rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}
		.middle {
			margin-top: 24rpx;
			margin-left: 98rpx;
			padding-bottom: 24rpx;
			border-bottom: 2rpx dashed $color-list;
			.line {
				width: 100%;
				margin-top: 18rpx;
				font-size: $font-size-sm;
				display: flex;
				flex-direction: row;
				.tip {
					flex: 1;
					color: $color-grey;
					margin-right: 30rpx;
				}
				.tip.t1 {
					color: $color-text;
				}
				.num {
					font-family: $font-family-num;
				}
			}
		}
		.bottom {
			margin-left: 98rpx;
			padding: 24rpx 0;
			display: flex;
			justify-content: center;
			.more {
				font-size: 22rpx;
				color: $color-primary;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.arr {
					width: 17rpx;
					height: 10rpx;
					margin-left: 10rpx;
				}
				.arr.up {
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L2WyAVCItAAAMTqsQPF0678.png');
				}
				.arr.down {
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L2UKAbaiCAAAMYfR63hE658.png');
				}
			}
		}
	}
}
.stick-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 80rpx;
	background: #ffffff;
	box-shadow: 0rpx 1rpx 1rpx 1rpx #eeeeee;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;

	.tat-date view {
		font-size: 26rpx;
		color: #666;
	}
}
</style>
